import React from 'react';
import styles from './index.less';

const ExamplesLayout: React.FC<{}> = () => {

  return (
    <div className={styles.container}>
      <h1>关于卡哈</h1>
      <p>Caja编译器是一种使第三方HTML，CSS和JavaScript安全地嵌入您的网站的工具。</p>

      <h3>卡哈做什么</h3>
      <p>假设您正在运行一个社交网站，人们可以与朋友见面，但是您的用户希望在该网站上运行游戏。游戏是由您从未认识过且没有特殊理由值得信赖的人编写的代码。这些游戏需要通过用户界面与用户进行交互。他们可能还想与您的网站互动以发布高分。您对允许游戏与您的网站进行哪些互动有一些想法：例如，它每天可能只发布一个“高分”通知，但可能无权访问您网站上用户的资源。</p>

      <p>显然，仅在您的站点上运行不受信任的代码会使您和您的用户暴露于游戏可能包含的所有错误或恶意软件。您可以将每个游戏单独放置在一个单独的域中，但这意味着您需要为要投放的游戏托管一个单独的安全域，并且您不得不在游戏之间实施跨域消息传递通过客户端黑客或服务器端代理访问您的网站。</p>
      <p>
        卡哈提供了一种更好的方法。使用Caja，您可以将每个游戏直接嵌入网站页面内，并通过常规JavaScript对象与之互动。通过Caja，您可以安全地执行此操作，并为您提供了通过常规JavaScript代码执行策略（例如“每天一次通知”规则）的地方。
      </p>
      <h3>主机页面</h3>
      <p>充当代码容器的网页没有特别的理由值得信任。该页面使用Caja API安全地使用该代码并限制其权限。</p>
      <h3>主机码</h3>
      <p>代码在主机页面上运行。</p>
      <h3>访客代码</h3>
      <p>宿主页面可能会或可能不会信任的某些外部来源中包含的代码。此代码需要在主机页面内以有限的权限运行。</p>
      <h3>访客页面</h3>
      <p>对于Caja，来宾代码表示为常规HTML页面，可能包含CSS和JavaScript。当HTML页面用作来宾代码时，它称为来宾页面。</p>
      <h3>政策</h3>
      <p>
        您对允许每个来宾代码执行的操作的决定。
        要使用Caja，您需要安排您的主页，以便Caja在来宾代码周围创建一个安全边界。在宿主页面的对象中，您构造了一些防御性的对象-换句话说，它们的API假定其客户端可能有错误或恶意。您向来宾代码授予对这些对象的访问权限，随后，您和来宾代码将使用这些对象进行协作。Caja提供了防御对象的 驯服功能，以确保来宾代码只能使用其发布的API。
      </p>


      <h3>防御对象</h3>
      <p> 宿主页中的一个对象，谨慎构造，目的是仅向其客户端提供有限的权限。您的主机页面通过为访客代码提供适当的防御对象来授予其有限的权限。总体而言，防御性对象中的代码将实现并因此实施您的策略。</p>
      <h3>驯服</h3>
      <p>当前的JavaScript对象无法使自己成为防篡改对象。驯服是在将防御对象提供给来宾代码时向其注册防御对象的过程。Caja确保来宾代码仅可使用对象的已发布API，并且来宾代码不能以您不希望的方式修改对象。</p>
      <h3>这个怎么运作</h3>
      <p>为了有效地使用Caja，您需要了解有关其工作方式的一些基础知识。下面显示了页面如何使用Caja的主要步骤。并非所有这些操作都必须按照显示的确切顺序进行。</p>

      <p>
        包括Caja，准备目标和防御对象
        主机代码包括主要的Caja脚本，准备防御对象，并构造一个以接收来宾代码。Caja脚本根据其配置指定建立与Caja服务器的连接。我们在提供了Caja服务器 http://caja.appspot.com/，您也可以下载我们的代码并自行运行。
      </p>
      <p>驯服对象并建立防御性DOM边界</p>

      <p>主机代码要求Caja驯服防御对象，并使用Caja在 其选择的范围内构造DOM边界。</p>
      <p>让Caja哄骗并运行代码</p>

      <p>主机代码要求Caja在提供的内运行一些来宾代码（用CSS和JavaScript表示为HTML）， 向该代码提供先前构建的经过驯服的防御对象。</p>
      <p>为了安全地运行代码，Caja必须对其进行转换以使其安全。它通过向Caja服务器发送请求来完成此操作，该请求 GET是代码并返回转换后的代码。我们称Caja转换为cajoling。</p>
      <h3>Cajoling</h3>
      <p>使Web内容（带有CSS和JavaScript的HTML）安全地包含在运行Caja的宿主页中的过程。Cajoling涉及添加内联检查，以确保代码不会破坏Caja所需的不变性，并确保代码无法引用未明确指定给宿主页面的变量。</p>
      <p>然后，Caja运行 您指定的驯服防御对象附带的代码。</p>
      <h3>访客代码看到的内容</h3>
      <p>从来宾代码的角度来看，它与似乎是W3C DOM兼容document对象和ECMAScript 5兼容JavaScript虚拟机一起运行。它document局限于提供的边界，并且它的JavaScript全局变量（如Object和 Array）是其自己的，不会影响其外部的代码。</p>
      <p>来宾代码在其顶级JavaScript上下文中将已驯服的防御对象视为其他全局变量。例如，如果宿主页面为游戏提供了一个经过驯服的功能，用于以该名称报告最高得分sendTopScore，则游戏代码将仅看到一个sendTopScore全局变量，并可以按常规方式将其作为函数调用。</p>
      <h3>进口货</h3>
      <p>提供给来宾代码的一组其他全局变量，使它可以调用宿主页面的服务。宿主页面指定了导入的名称，并提供了驯服的防御对象作为其值。
      评分和评价</p>
      <p>除非另有说明，否则此页面的内容均已根据Creative Commons Attribution 4.0许可获得许可，而代码示例均已根据Apache 2.0许可获得许可。有关详细信息，请参阅Google Developers Site Policies。Java是Oracle和/或其附属公司的注册商标。</p>
      <p>最近更新时间：2012-02-12 UTC。</p>
    </div >
  )
}

export default ExamplesLayout;